import { List, PullRefresh } from 'react-vant'
import React, { useState, useEffect } from 'react'
import { getUserArticle } from '../../../api/article'
import Item from '../article-item/index'
export default (props) => {
    const [list, setList] = useState([]);
    const [finished, setFinished] = useState(false);
    const [timestamp, setTimestamp] = useState(Date.now());

    const onLoad = async () => {
        // 异步更新数据
        const data = await getData();
        setList((v) => [...v, ...data.results]);
        setTimestamp(data.pre_timestamp)
        if (data.results.length === 0) {
            setFinished(true);
        }
    };
    async function getData() {
        try {
            const res = await getUserArticle({
                channel_id: props.id,
                timestamp: timestamp,
                with_top: 1
            })
            console.log(res.data.data);
            return res.data.data
        } catch (error) {

        }
    }
    async function onRefresh() {
        try {
            const res = await getUserArticle({
                channel_id: props.id,
                timestamp: Date.now(),
                with_top: 1
            })
            const data = res.data.data
            setList((v) => { return [...data.results, ...v] });
            setTimestamp(data.pre_timestamp)
        } catch (error) {
        }
    }
    return (
        <PullRefresh successText="刷新成功" onRefresh={onRefresh}>
            <List finished={finished} onLoad={onLoad}>
                {list.length
                    ? list.map((item, index) => {
                        return <Item key={index} data={item} />;
                    })
                    : null}
            </List>
        </PullRefresh>
    )
}